<template>
  <div class="header">
    <!--    头部内容-->
     <div>
       <el-avatar v-if="headImage == ''" icon="el-icon-user-solid"></el-avatar>
       <el-avatar v-else :src="'http://42.193.17.196:8089/Images/'+headImage"></el-avatar>
       <span>{{nickName}}</span>

     </div>
    <div>
      <button class="btn_out"@click="outLogin">退出</button>
    </div>
<!--    <div>-->
<!--      <el-dropdown trigger="click">-->
<!--        <span class="el-dropdown-link">-->
<!--          <i class="el-icon-more"></i>-->
<!--        </span>-->
<!--        <el-dropdown-menu slot="dropdown" style="">-->
<!--          <el-dropdown-item @click="outLogin">退出</el-dropdown-item>-->
<!--        </el-dropdown-menu>-->
<!--      </el-dropdown>-->
<!--    </div>-->
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "header",

  data(){
    return{
      // image:"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
    }
  },
  props:{
    nickName:String,
    headImage:String,
  },
  computed:{

  },
  mounted() {
  },
  methods:{
    outLogin(){
      //退出
      this.$emit("outLogin",true);
    }
  }
}
</script>

<style lang="less" scoped>
.header{
  div:nth-child(1){
    height: 50px;
    margin-top: 0.6rem;
    float:left;
    text-overflow:ellipsis;
    overflow: hidden;
    white-space: nowrap;
    span{
      margin-left: 0.8rem;
      margin-bottom: -0.7rem;
    }
  }
  div:nth-child(2){
    float:right;
    margin-top: 0.8rem;
    margin-right: 1.5rem;
   .btn_out{
     width: 60px;
     background-color: #66B1FF;
     border-radius: 10px;
     border: 0;
     color: #fff;
     line-height: 25px;
   }
  }


}
</style>